<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图案例</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="banner">
        <div class="index">
            <div class="index-img" style="background-image: url(css/201226121556-2.jpg);">
            </div>
            <div class="index-img" style="background-image: url(css/QQ图片20211004120821.jpg);">
            </div>
            <div class="index-img" style="background-image: url(css/QQ图片20211016190749.png);">
            </div>
            <div class="index-img" style="background-image: url(css/QQ图片20211016190758.png);">
            </div>
        </div>
        <span id="top">
            < </span>
                <span id="bottom">></span>
                <ul id="xuanze">
                </ul>
    </div>
    <script>
        let banner = document.querySelector(".banner>.index");
        let img = banner.children;
        let xz = document.getElementById("xuanze");
        let li = [];
        let top_1 = document.getElementById("top");
        let bottom = document.getElementById("bottom");
        let trans_value = 100 / img.length;
        let trans_down = 0;
        for (let i = 0; i < img.length; i++) {
            li[i] = document.createElement("li");
            xz.appendChild(li[i]);
        } //根据图片数量创建li标签
        banner.style.width = img.length * 100 + "vw"; //根据子级数量,给父级合适的宽度
        li[0].style.backgroundColor = "black";
        bottom.onclick = function () {
            trans_down += trans_value;
            for (let i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = "white";
            }
            if (trans_down >= trans_value * (img.length)) {
                trans_down = 0;
                banner.style.transform = `translateX(${trans_down * -1}%)`
            } else {
                banner.style.transform = `translateX(${trans_down * -1}%)`
            }
            let li_down = trans_down / trans_value;
            li[li_down].style.backgroundColor = "black";
        }; // 按钮右
        top_1.onclick = function () {
            trans_down -= trans_value;
            for (let i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = "white";
            }
            if (trans_down < 0) {
                trans_down = trans_value * (img.length - 1);
                banner.style.transform = `translateX(${trans_down * -1}%)`
            } else {
                banner.style.transform = `translateX(${trans_down * -1}%)`
            }
            let li_down = trans_down / trans_value;
            li[li_down].style.backgroundColor = "black";
        };// 按钮左
        let lunbo = setInterval(() => {
            trans_down += trans_value;
            for (let i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = "white";
            }
            if (trans_down >= trans_value * (img.length)) {
                trans_down = 0;
                banner.style.transform = `translateX(${trans_down * -1}%)`
            } else {
                banner.style.transform = `translateX(${trans_down * -1}%)`
            }
            let li_down = trans_down / trans_value;
            li[li_down].style.backgroundColor = "black";
        }, 8000); // 设置2秒自动轮播
        for (let i = 0; i < li.length; i++) {
            li[i].index = i;
            li[i].onclick = function () {
                for (let i = 0; i < li.length; i++) {
                    li[i].style.backgroundColor = "white";
                }
                let li_trans = this.index * (trans_value);
                this.style.backgroundColor = "black";
                banner.style.transform = `translateX(${li_trans * -1}%)`;
            };
        }
    </script>
</body>

</html>